<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
    // 1. 全选功能
    //    勾上  全部选中     取消  全部取消
    document.querySelector('.selectAll').onclick = function(){
        var _this = this;
         document.querySelectorAll('.uesr').forEach(function(item){
            // console.log(this);
            item.checked = _this.checked;
         })
    }

    // 2. 当所有的user 全部选中   全选自动勾上
    document.querySelectorAll('.uesr').forEach(function(item){
        item.onclick = function(){
        // 如果当前被勾选的user个数以 user 个数相同 就证明全选
        if(document.querySelectorAll('.user').length == document.querySelectorAll('.user:checked').length){
            document.querySelector('.selectAll').checked = true;
        }
        }
    })
        
        
    
</script>